<template>
  <div class="index-box" v-loading="loading">
    <div class="top">
      <div>欢迎您登录Megad商家端管理系统</div>
      <!-- <div class="marquee-box" ref="marquee" @mouseover="menter" @mouseleave="mleave" style="position: relative;height: 30px;">
        <div class="announcementBox" ref="cmdlist" id="pWidth" @click="articleVisible=true">
          <img src="@/assets/ggIcon.png" >
          <div v-html="title"></div>
          <div v-html="content"></div>
        </div>
      </div> -->
    </div>
    <div class="imgBox">
     <!-- <img src="@/assets/home.png" > -->

    </div>

  <!-- 查看公告 -->
  <el-dialog title="查看公告" :visible.sync="articleVisible" width="900px" :close-on-click-modal="false" v-dialogDrag>
   <h1 v-html="title" style="text-align: center;margin: 15px 0;"></h1>
   <div v-html="content" style="margin-bottom: 35px;"></div>
  </el-dialog>

  </div>
</template>

<script>
import echarts from 'echarts'
import option from '@/common/option'
 import { articleList } from '@/api/getData';
export default {

  data () {
    return {
      loading:false,
      articleVisible:false,
      top1:332,
      top2:222,
      top3:444,
      top4:555,
      dataList:[],
      title:'',
      content:'',
      searchForm: {
        contractId:'4',
        name:'',
        status:'',
        pageNum: 1,
        pageSize: 1,
      },

      value: 0,
      timer: '',//计时器
      pwidth:0,//公告文本的宽度
      windowWidth:1000,// 设备屏幕的宽度
    }
  },
  mounted () {
    // this.drawEcharts();
    // this.bottomEcharts();
    let element = this.$refs.cmdlist;
    this.pwidth = document.defaultView.getComputedStyle(element,'').width.split('px');
    this.timer = setInterval(this.clickCommend, 20);
    //this.dataInfo();
  },
  watch:{
    value(newValue, oldValue) {
      let allWidth= parseInt(this.windowWidth)+parseInt(this.pwidth[0]);
      if(newValue <= -allWidth){
        this.$refs.cmdlist.style.left = this.windowWidth+"px";
        this.value = 0;
      }
    },
  },
  methods: {
    handleLook(){

    },
    clickCommend(e) {
      let _this = this;
      this.$nextTick(() => {
        this.value -=1;
        this.$refs.cmdlist.style.left = _this.windowWidth+this.value+"px";
      });
    },
    menter(){
      clearInterval(this.timer);
    },
    mleave(){
      this.timer = setInterval(this.clickCommend, 20);
    },
    async dataInfo() {
      try {
        let data = this.addDateRange(this.searchForm, this.applyTime, 'startTime', 'endTime');
        this.loading = true;
        const result = await articleList(data);
        if (result.code == 200) {
          this.title = result.rows[0].name;
          this.content = JSON.parse(result.rows[0].description);
          this.loading = false;
        } else {
          this.$message.error(result.msg);
        }
        this.loading = false;
      } catch (err) {
        this.loading = false;
        console.log(err)
      }
    },

    drawEcharts () {
      let chart = echarts.init(document.getElementById('echarts'))
      let option = {
          title: {
              text: ''
          },
          tooltip: {
              trigger: 'axis'
          },
          legend: {
              data:['邮件营销','联盟广告','视频广告','直接访问','搜索引擎']
          },
          grid: {
              left: '3%',
              right: '4%',
              bottom: '3%',
              containLabel: true
          },
          toolbox: {
              feature: {
                  saveAsImage: {}
              }
          },
          xAxis: {
              type: 'category',
              boundaryGap: false,
              data: ['周一','周二','周三','周四','周五','周六','周日']
          },
          yAxis: {
              type: 'value'
          },
          series: [
              {
                  name:'邮件营销',
                  type:'line',
                  stack: '总量',
                  data:[120, 132, 101, 134, 90, 230, 210]
              },
              {
                  name:'联盟广告',
                  type:'line',
                  stack: '总量',
                  data:[220, 182, 191, 234, 290, 330, 310]
              },
              {
                  name:'视频广告',
                  type:'line',
                  stack: '总量',
                  data:[150, 232, 201, 154, 190, 330, 410]
              },
              {
                  name:'直接访问',
                  type:'line',
                  stack: '总量',
                  data:[320, 332, 301, 334, 390, 330, 320]
              },
              {
                  name:'搜索引擎',
                  type:'line',
                  stack: '总量',
                  data:[820, 932, 901, 934, 1290, 1330, 1320]
              }
          ]
      };

      // 设置配置项
      chart.setOption(option)


    },
    bottomEcharts(){
      let chart1 = echarts.init(document.getElementById('echarts1'));
      let chart2 = echarts.init(document.getElementById('echarts2'));
      let chart3 = echarts.init(document.getElementById('echarts3'));
      let option = {
        color: ['#3398DB'],
        tooltip : {
            trigger: 'axis',
            axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            }
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis : [
            {
                type : 'category',
                data : ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
                axisTick: {
                    alignWithLabel: true
                }
            }
        ],
        yAxis : [
            {
                type : 'value'
            }
        ],
        series : [
            {
                name:'直接访问',
                type:'bar',
                barWidth: '60%',
                data:[10, 52, 200, 334, 390, 330, 220]
            }
        ]
    };

      // 设置配置项
      chart1.setOption(option);
      chart2.setOption(option);
      chart3.setOption(option);
    }
  },
  beforeDestroy() {
    clearInterval(this.timer);
  }

}
</script>

<style lang="scss" scoped>
  #pWidth{
    position: absolute;
    top:0px;
  }
  .marquee-box{
    width: 50%;
    overflow: hidden;
  }
  .announcementBox{
    display: flex;
    align-items: center;
    color:#333333;
    font-size: 14px;
    margin-top:10px;
    width: 2060px;
    img{
      width: 16px;
      height:16px;
      margin-right:3px;
    }
  }
  .index-box{
    background:#f0f2f5!important;
    height: 100%;
    overflow-y: auto;
  }
  .top{
    padding:30px;
    font-size: 20px;
    color:#333;
    background-color: #fff!important;
    margin-bottom: 20px;
  }
  .imgBox{
    width: 100%;
    img{
       width: 100%;
    }
  }
  .top{
    background-color: #f0f2f5;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 30px;
    font-weight: bold;
  }


  .main{
    background:#fff;
    margin:0 20px;
    padding:20px;
    .echarts {
      width: 98%;
      height: 350px;
    }
  }

  .bottom{
    display: flex;
    .bottom-box{
      margin-top:30px;
      margin-bottom: 20px;
      flex:1;
      padding:0 20px;
      div{
        background: #fff;
        height:350px;
      }
    }
  }
</style>
